import React, { useMemo } from 'react'
import { COLUMNS } from "./columns"
import MOCK_DATA from "./MOCK_DATA.json"
import { useSortBy, useTable } from 'react-table'
import "./table.css"
const SortTable = () => {
    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => MOCK_DATA, [])
    const { getTableProps, getTableBodyProps, headerGroups, footerGroups , rows, prepareRow } = useTable({ columns, data },useSortBy)
    return (
        <>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map(item => (
                                    <th {...item.getHeaderProps(item.getSortByToggleProps())} >
                                        {item.render("Header")}
                                        {
                                            item.isSorted?(item.isSortedDesc?"⬇️":"⬆️"):""
                                        }
                                    </th>
                                ))
                            }

                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        rows.map(row => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render("Cell")}</td>)
                                    }
                                </tr>
                            )
                        })
                    }
            </tbody>
            <tfoot>
                {footerGroups.map(footGroup=>(
                    <tr {...footGroup.getFooterGroupProps()}>
                       {footGroup.headers.map(column=>(
                        <td {...column.getFooterProps()}>{column.render("Footer")}</td>
                       ))}
                    </tr>
                ))}
            </tfoot>
        </table >
        </>
    )
}

export default SortTable